<%@ include file='includes/head.jsp'%>




<span id='status'>Hola mundo...</span>
<a href='/'>Home</a>
<div id='links'>
	<a href='http://google.com'>Google</a> <a href='http://ubuntu.com'>Ubuntu</a>
	<a href='http://debian.org'>Debian</a>
</div>

<div id='frases'>
	<div>Hola mundo!</div>
	<div>Foo bar</div>
	<div>Lorem Ipsum</div>
</div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<form>
 <input type='text' id='nombre' value='Javier' onmouseover="this.focus()" />
 <input type='text' id='apellidos' value='Perez' onmouseover="this.focus()" />
</form>
<a href='#' onclick="document.getElementById('nombre').focus()">Nombre</a>
	 <a href='#'  onclick="document.getElementById('apellidos').focus()">Apellidos</a>
 
<!--  A partir de HTML5 el type type='text/javascript' sobra -->
<script>
$( "p" ).wrap( "<div></div>" );
</script>
<script>
	function init() {
		document.write('<h1>Hello world</h1>');
		var el = document.getElementById('status');
		console.info('Hemos cargado la variable ' + el);
	}
	var el2 = document.getElementById('status4444444');
	if (el2 == undefined) {

		console.error('No hemos encontradoe l elemento.');
	}

	// Obtenemos el elemento con id 'links' var 
	el = document.getElementById('links');
	// Ahora obtenemos todos los elementos con tag A que hay 
	// dentro del elemento 'el' var 
	as = el.getElementsByTagName('a');
	// Y finalmente recorremos el array de elementos para 
	// cambiarles el color a cada uno 
	for (var i = 0; i < as.length; i++) {
		as[i].style.color = 'pink'; // negro 
	}
	
	
	// Creamos la funcion para añadir eventos
	function nuevo_evento(elemento, evento, funcion) {
	 if (elemento.addEventListener) {
	 elemento.addEventListener(evento, funcion, false);
	 } else {
	 elemento.attachEvent('on'+evento, funcion);
	 }
	 }
	// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
	 var divs = document.getElementById('frases').getElementsByTagName('DIV');
	 // Recorremos todos los divs
	 for (var i=0; i<divs.length; i++) {
	 // Añadimos el evento onclick al div
	 nuevo_evento(divs[i], 'click', function(){
	 // Hacemos que muestre el contenido del DIV
	 alert(this.innerHTML); }
	 );
	 }
	 
	 
	
	//Esperamos a cargar toda la pagina para llamar a la funcion de init
	window.onload = init();
</script>


<%@ include file='includes/footer.jsp'%>